<template>
  <el-row class="login">
    <el-col :lg="16" :md="12" class="login-left">
      <div class="flex-col flex items-center relative">
        <p>欢迎光临</p>
        <KSvgIcon name="login" width="300px" height="300px" />
      </div>
    </el-col>
    <el-col :lg="8" :md="12" class="login-right">
      <h2>欢迎回来</h2>
      <div class="login-right-title">
        <span class="line"></span>
        <span>账号密码登录</span>
        <span class="line"></span>
      </div>
      <el-form
        ref="formRef"
        class="w-[250px]"
        :model="formParmas"
        :rules="rules"
      >
        <el-form-item prop="username">
          <el-input
            v-focus
            v-model.trim="formParmas.username"
            prefix-icon="User"
            :placeholder="initPasswordPlaceholder('用户名')"
            @keyup.enter="handleSubmit"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model.trim="formParmas.password"
            show-password
            prefix-icon="Lock"
            type="password"
            @keyup.enter="handleSubmit"
            :placeholder="initPasswordPlaceholder('密码')"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            round
            color="#626aef"
            style="width: 100%"
            @click="handleSubmit"
            :loading="loading"
          >
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script setup lang="ts" name="login">
import type { FormRules, FormInstance } from 'element-plus'
const router = useRouter()
const route = useRoute()
const formRef = ref<FormInstance | null>(null)
const loading = ref(false)
const userStore = useUserStore()
onMounted(() => {
  initPassword()
})
/**
 * formParmas表单收集数据
 */
const formParmas = reactive({
  username: '',
  password: '',
})
/**
 * 登录方法
 */
const handleSubmit = () => {
  formRef.value!.validate((valid) => {
    if (!valid) return
    loading.value = true //开启loading
    userStore
      .useLoginfn(formParmas)
      .then(() => {
        router.push(<string>route.query.redirect || '/') //跳转
        //提示一下
        ElNotification({
          title: `Hi,${useGetTime()}`,
          message: '登录成功',
          type: 'success',
        })
      })
      .finally(() => {
        loading.value = false //关闭loading
      })
  })
}

/**
 *  在模板中启用 v-focus  聚焦
 */
const vFocus = {
  mounted: (el: HTMLElement) => {
    el.querySelector('input')!.focus() // 聚焦用户名输入框
  },
}
/**
 * 校验匹配规则
 */
const rules: FormRules = {
  username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
  password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
}
/**
 * 初始化设置开发环境账号密码
 */

const initPassword = () => {
  if (import.meta.env.MODE !== 'development') return
  formParmas.username = 'admin'
  formParmas.password = 'admin'
}

/**
 * 线上环境默认账号密码
 */
const initPasswordPlaceholder = (val: string) => {
  return import.meta.env.MODE === 'development' ? '请输入' + val : val + 'admin'
}
</script>

<style scoped lang="scss">
.login {
  @apply bg-indigo-500 min-h-screen;
  &-left {
    @apply flex items-center justify-center;
    p {
      @apply font-bold  text-3xl text-light-50  absolute top-37 left-23 select-none;
    }
  }
  &-right {
    @apply bg-light-50 flex items-center justify-center flex-col;
    > h2 {
      @apply font-bold text-3xl text-gray-800;
    }
    &-title {
      @apply flex justify-center items-center my-5 text-gray-300 space-x-2;
      .line {
        @apply h-[1px] w-16 bg-gray-200;
      }
    }
  }
}
</style>
